<template>
	<view class="container">
		<!-- 顶部搜索区域 -->
		<view class="search-container">
			<view class="logo">歌单</view>
			<SearchBox @search="handleSearch"></SearchBox>
		</view>
		
		<!-- 歌单分类 -->
		<view class="category-section">
			<scroll-view scroll-x="true" class="category-scroll">
				<view 
					v-for="(item, index) in categories" 
					:key="index" 
					class="category-item"
					:class="{ active: currentCategory === item.id }"
					@tap="changeCategory(item.id)"
				>
					{{ item.name }}
				</view>
			</scroll-view>
		</view>
		
		<!-- 歌单列表 -->
		<view class="playlist-grid">
			<view class="playlist-item" v-for="(item, index) in playlists" :key="index" @tap="goToDetail(item.id)">
				<image :src="item.coverImgUrl" mode="aspectFill" class="playlist-cover" />
				<view class="playlist-info">
					<text class="playlist-name">{{ item.name }}</text>
					<view class="playlist-stats">
						<uni-icons type="headphones" size="12" color="#999"></uni-icons>
						<text class="play-count">{{ formatCount(item.playCount) }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import SearchBox from '../../components/SearchBox/SearchBox.vue';

export default {
	components: {
		SearchBox
	},
	data() {
		return {
			currentCategory: 'all',
			categories: [
				{ id: 'all', name: '全部' },
				{ id: 'official', name: '官方' },
				{ id: 'recommend', name: '推荐' },
				{ id: 'theme', name: '主题' },
				{ id: 'mood', name: '心情' },
				{ id: 'genre', name: '流派' }
			],
			playlists: [
				{
					id: '1',
					name: '华语经典',
					coverImgUrl: 'https://ai-public.mastergo.com/ai/img_res/d923ab4fe374f028e4c0aca97b075b30.jpg',
					playCount: 1000000
				},
				{
					id: '2',
					name: '流行热歌',
					coverImgUrl: 'https://ai-public.mastergo.com/ai/img_res/eaf3065a8df8206988c42b2bfca69247.jpg',
					playCount: 2500000
				},
				{
					id: '3',
					name: '轻音乐',
					coverImgUrl: 'https://ai-public.mastergo.com/ai/img_res/639dfba45d770ddafc383f015129684c.jpg',
					playCount: 800000
				},
				{
					id: '4',
					name: '欧美金曲',
					coverImgUrl: 'https://ai-public.mastergo.com/ai/img_res/b059c57d9335847a98722545006ca573.jpg',
					playCount: 1500000
				},
				{
					id: '5',
					name: '电影原声',
					coverImgUrl: 'https://ai-public.mastergo.com/ai/img_res/f78af01cfbd8e92dfedb657bd7388415.jpg',
					playCount: 1200000
				},
				{
					id: '6',
					name: '古风歌曲',
					coverImgUrl: 'https://ai-public.mastergo.com/ai/img_res/aa424ab34dd0bcc55dee6ed650402109.jpg',
					playCount: 900000
				}
			]
		}
	},
	onLoad() {
		// 页面加载时获取歌单数据
		this.fetchPlaylists();
	},
	methods: {
		fetchPlaylists() {
			// 这里应该调用后端API获取歌单数据
			// 示例代码：
			/*
			uni.request({
				url: 'http://localhost:3000/playlist',
				method: 'GET',
				data: {
					category: this.currentCategory
				},
				success: (res) => {
					this.playlists = res.data.playlists || [];
				},
				fail: (err) => {
					console.error('获取歌单失败:', err);
					uni.showToast({
						title: '获取歌单失败',
						icon: 'none'
					});
				}
			});
			*/
		},
		changeCategory(categoryId) {
			this.currentCategory = categoryId;
			this.fetchPlaylists();
		},
		handleSearch(results) {
			// 处理搜索结果
			console.log('搜索结果:', results);
		},
		goToDetail(id) {
			// 跳转到歌单详情页
			uni.navigateTo({
				url: `/pages/playlist-detail/playlist-detail?id=${id}`
			});
		},
		formatCount(count) {
			if (count >= 10000) {
				return (count / 10000).toFixed(1) + '万';
			}
			return count.toString();
		}
	}
}
</script>

<style>
page {
	background-color: #f8f8f8;
}
.container {
	padding: 0 30rpx;
}
.search-container {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	margin-bottom: 30rpx;
}
.logo {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	margin-right: 30rpx;
}
.category-section {
	margin-bottom: 30rpx;
}
.category-scroll {
	white-space: nowrap;
}
.category-item {
	display: inline-block;
	padding: 16rpx 30rpx;
	margin-right: 20rpx;
	background-color: #f1f1f1;
	border-radius: 30rpx;
	font-size: 28rpx;
	color: #666;
}
.category-item.active {
	background-color: #1aad19;
	color: #fff;
}
.playlist-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30rpx;
}
.playlist-item {
	background-color: #fff;
	border-radius: 12rpx;
	overflow: hidden;
}
.playlist-cover {
	width: 100%;
	height: 320rpx;
	border-radius: 12rpx 12rpx 0 0;
}
.playlist-info {
	padding: 16rpx;
}
.playlist-name {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-bottom: 10rpx;
}
.playlist-stats {
	display: flex;
	align-items: center;
	font-size: 24rpx;
	color: #999;
}
.play-count {
	margin-left: 8rpx;
}
</style>